<template>
    <van-overlay :show="show" >
        <view class="wrapper">
            <view class="block">
                <view class="title">
                    <view class="title_left"> {{ title }} </view>
                    <view class="title_right" @click="offShow">
                        <van-icon name="cross"></van-icon>
                    </view>
                </view>
                <view class="main-wrap">
                    <slot></slot>
                </view>
            </view>
        </view>
    </van-overlay>
</template>

<script>
export default {
    props: {
        title: String,
        show: Boolean
    },
    methods: {
        //关闭
        offShow() {
            this.$emit("close", false)
        },
    },
};
</script>

<style lang="scss" scoped >

// 弹框样式
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width:100%;

  .block {
    width: 100%;
    height: auto;
    background-color: #fff;
    margin: 0 30rpx;
    border-radius: 16px;
    padding: 30rpx;

    .title {
      width: 100%;
      // height: 50rpx;
      // border: 1px solid;
      display: flex;
      justify-content: space-between;
      padding:20rpx 0;
      .title_left {
        color: rgba(16, 16, 16, 1);
        font-size: 36rpx;
        font-weight: bold;
        font-family: SourceHanSansSC-medium;
      }

      .title_right {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        background: rgba(62, 61, 61, 1);
        text-align: center;
        color: #ffffff;
        // font-weight: bold;
        line-height: 36rpx;
        // display: flex;
        // justify-content: center;
        // align-items: center;
      }
    }

    .btn_style {
      display: flex;
      justify-content: space-evenly;
      margin-top: 30rpx;

      .van-button {
        border-radius: 10rpx;
      }
    }
  }
}
</style>